(function (window, undefined) {
  function Player(option) {
    // 继承公有坦克构造函数
    Tank.call(this, option);
    this.life = 3;
    this.grade = 0;
    // this.camp = {};
    this.tankElements = [];
    this.tankBox = {};
  }
  Player.prototype.render = function (map) {
    //创建文档碎片，减少回流
    // let frag = document.createDocumentFragment();
    //通过坦克数组对象生成坦克
    // for (let i = 0; i < this.tank.length; i++) {
    //   let div = document.createElement("div");
    //   div.style.width = this.width + "px";
    //   div.style.height = this.height + "px";
    //   div.style.backgroundColor = this.tank[i].color;
    //   div.style.position = this.abso;
    //   //游戏NPC与玩家共用坦克构造函数，两者初始化方位不同，
    //   // NPC方位参考left, top, 左上位置
    //   // 玩家方位参考right, bottom, 右下位置
    //   div.style.right = this.tank[i].x * this.width + "px";
    //   div.style.bottom = this.tank[i].y * this.height + "px";
    //   div.innerText = i;
    //   frag.appendChild(div);
    //   //记录坦克每个组成块
    //   this.tankElements.push(div);
    // }
    // map.appendChild(frag);
    //坦克各个组成块装入坦克容器中，将组成块视为一个整体
    let box = document.createElement("div");
    box.style.width = this.width * 3 + "px";
    box.style.height = this.height * 3 + "px";
    box.style.display = "flex";
    box.style.position = this.abso;
    box.style.right = this.position.left * this.width + "px";
    box.style.bottom = this.position.top * this.height + "px";
    box.style.position = this.abso;
    box.style.flexWrap = "wrap";
    // console.log(this.direction);
    box.style.transform = "rotate(" + this.direction + "deg)";
    box.customBelong = this.isBelong;
    box.customRole = "tank";
    box.customDirection = this.direction;
    for (let i = 0; i < 9; i++) {
      let div = document.createElement("div");
      div.style.width = this.width + "px";
      div.style.height = this.height + "px";
      div.style.backgroundColor = this.tank[i].color;
      box.appendChild(div);
      //记录坦克每个组成块
      // this.tankElements.push(div);
    }
    this.tankBox = box;
    map.appendChild(box);
    this.tankElements.push(box);
  };
  Player.prototype.move = function () {
    //新旧方向比对，确定按键后触发的移动方向与原方向的相对关系
    /* 
      四种移动方式
      1，同向移动，所有组成块横坐标加1；
      2，反向移动，直接炮头横或纵坐标减2；
      3，相对炮头方向的右侧移动，相当于右侧身运动，顺时针方向；
      4，相对炮头方向的左侧移动，相当于左侧身运动，逆时针方向；
      */
    /* 运动简化为同向运动和非同向移动
     同向移动：对应组成块所有坐标加一
     非同向移动：先做转向运动
     */
    // 首先判断是否同向

    //同向则开始坐标变换移动
    //判断此时坦克方向
    switch (this.direction) {
      //left
      case -90:
        this.position.left += 1;
        break;
      //top
      case 0:
        this.position.top += 1;
        break;
      // right
      case 90:
        this.position.left -= 1;
        break;
      case 180:
        this.position.top -= 1;
        break;
      // bottom
      default:
        break;
    }
  };
  //   移出元素
  Player.prototype.remove = function (map) {
    //移除旧位置坦克，同时清空组成块数组
    // for (let i = 0; i < this.tankElements.length; i++) {
    //   map.removeChild(this.tankElements[i]);
    // }
    // this.tankElements = [];
    //移出旧坦克
    map.removeChild(this.tankBox);
    this.tankElements = [];
    this.tankBox = {};
  };
  //私有处理函数，绑定按键事件
  //   function bindKey () {
  //       document.onkeydown = function(e) {

  //           switch (e.keyCode) {
  //               case value:

  //                   break;

  //               default:
  //                   break;
  //           }
  //       }
  //   }
  window.Player = Player;
})(window, undefined);
// let player = new Player({
//   bodyColor: "#fafafa",
//   headColor: "red",
//   role: "player",
//   direction: -90,
// });

// const map = document.getElementById("map");
// player.render(map);
